<template>
  <div class="invesorder">
    <div class="bgg">
      <div class="card_title">
        跑单商品
      </div>
      <div class="groupbox" style="margin-bottom: 19px">
        <div class="" style="margin-top: 12px">
          <a-space align="baseline">
            <span class="title">提交平台：</span>
            <a-checkbox-group v-model="success_status" :options="options"/>
            <span class="title">提交状态：</span>
            <a-checkbox-group v-model="status" :options="options"/>
            <span class="title">筛选小组：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 100px;height:24px;"
              placeholder="请选择小组"
              @change="handleChange"
              v-model="group_id"
              allowClear
            >
              <a-select-option :value="v.id" v-for="(v,index) in classList" :key="index">
                {{ v.name }}
              </a-select-option>
            </a-select>
            <span class="title">组员：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 100px;height:24px;"
              placeholder="请选择组员"
              @change="handleChange"
              v-model="user_id"
              allowClear
            >
              <a-select-option :value="v.id" v-for="(v,index) in classList" :key="index">
                {{ v.name }}
              </a-select-option>
            </a-select>
            <span class="title">审核人员：</span>
            <a-select
              label-in-value
              class="selecth24 br4"
              style="width: 100px;height:24px;"
              placeholder="请选择审核人员"
              @change="handleChange"
              v-model="pd_manaUser"
              allowClear
            >
              <a-select-option :value="v.id" v-for="(v,index) in classList" :key="index">
                {{ v.name }}
              </a-select-option>
            </a-select>
            <span class="title">出单服务费：</span>
            <div>
              <a-input v-model="value" placeholder="最低" style="width:70px"/>
              至
              <a-input v-model="value" placeholder="最高" style="width:70px"/>
            </div>
            <!--            <span class="title">店铺：</span>-->
            <!--            <a-input v-model="shopTitle" placeholder="店铺名称" class="ipt br4"/>-->
          </a-space>
        </div>
        <div class="" style="margin-top: 12px">
          <a-space align="baseline">
            <span class="title">录入时间段：</span>
            <a-range-picker
              :ranges="{
                本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                上周: [
                  moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                  moment().subtract(parseInt(moment().format('d')), 'days')
                ],
                本月: [
                  moment()
                    .month(moment().month())
                    .startOf('month'),
                  moment()
                    .month(moment().month())
                    .endOf('month')
                ],
                上月: [
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  ),
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  )
                    .subtract(-1, 'month')
                    .add(-1, 'days')
                ],
                半年: [
                  moment()
                    .startOf('day')
                    .subtract(6, 'month'),
                  moment()
                ]
              }"
              format="YYYY-MM-DD"
              @change="passChange"
              class="timepacker br4"
              style="width:230px;"
            >
            </a-range-picker>
            <span class="title">商品id：</span>
            <a-input v-model="itemId" placeholder="商品id" class="ipt br4"/>
            <span class="title">店铺：</span>
            <a-input v-model="shopTitle" placeholder="店铺名称" class="ipt br4"/>
            <span class="title">排期开始时间段：</span>
            <a-range-picker
              :ranges="{
                本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                上周: [
                  moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                  moment().subtract(parseInt(moment().format('d')), 'days')
                ],
                本月: [
                  moment()
                    .month(moment().month())
                    .startOf('month'),
                  moment()
                    .month(moment().month())
                    .endOf('month')
                ],
                上月: [
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  ),
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  )
                    .subtract(-1, 'month')
                    .add(-1, 'days')
                ],
                半年: [
                  moment()
                    .startOf('day')
                    .subtract(6, 'month'),
                  moment()
                ]
              }"
              format="YYYY-MM-DD"
              @change="passChange"
              class="timepacker br4"
              style="width:230px;"
            >
            </a-range-picker>
            <span class="title">排期结束时间段：</span>
            <a-range-picker
              :ranges="{
                本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                上周: [
                  moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                  moment().subtract(parseInt(moment().format('d')), 'days')
                ],
                本月: [
                  moment()
                    .month(moment().month())
                    .startOf('month'),
                  moment()
                    .month(moment().month())
                    .endOf('month')
                ],
                上月: [
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  ),
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .format('YYYY-MM') + '-01'
                  )
                    .subtract(-1, 'month')
                    .add(-1, 'days')
                ],
                半年: [
                  moment()
                    .startOf('day')
                    .subtract(6, 'month'),
                  moment()
                ]
              }"
              format="YYYY-MM-DD"
              @change="passChange2"
              class="timepacker br4"
              style="width:230px;"
            >
            </a-range-picker>
            <a-button
              type="primary"
              :disabled="btnloading"
              size="small"
              class="br4"
              @click="getWebPaodanData(1)">
              <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
              {{ btnloading===true?'筛选中...':'筛选' }}
            </a-button>
            <a-button size="small">导出</a-button>
          </a-space>
        </div>
      </div>
      <div class="invesordertable">
        <a-table
          :columns="columns"
          :rowKey="(item,index) => index"
          :dataSource="invesorder"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="itemId" slot-scope="text, row">
            <div class="goodsinfo">
              <div class="line-1" style="width:289px">
                <a :href="'https://detail.tmall.com/item.htm?id='+row.itemId" target="_blank" rel="noopener noreferrer">
                  {{ row.title }}</a></div>
              <div>商品ID:{{ row.itemId }}</div>
            </div>
          </div>
          <div slot="startTime" slot-scope="text, row">
            <div>起:{{ row.startTime }}</div>
            <div>止:{{ row.endTime }}</div>
          </div>

          <div slot="is_serviceRate" slot-scope="text, row">
            <div>{{ row.is_serviceRate }}</div>
          </div>
          <div slot="active" slot-scope="row">
            <div>
              <a-button type="link" @click="goedit(row)">详情</a-button>
            </div>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getWebPaodanData } from '@/api/admin/skipper'
  import moment from 'moment'

  export default {
    name: 'Invesorder',
    data () {
      return {
        moment,
        value: '',
        shopTitle: '',
        itemId: '',
        classList: [],
        success_status: [],
        status: [],
        options: [
          { label: '大淘客', value: 1 },
          { label: '实惠猪', value: 2 },
          { label: '好单库', value: 3 }
        ],
        options2: [
          { label: '大淘客拒绝', value: 1 },
          { label: '实惠猪拒绝', value: 2 },
          { label: '好单库拒绝', value: 3 }
        ],
        type: {
          key: 1,
          label: '汇总数据'
        },
        pd_manaUser: '',
        user_id: '',
        group_id: '',
        start: '',
        end: '',
        pagination: {
          pageSize: 15,
          page: 1
        },
        columns: [
          {
            title: '提交用户',
            align: 'center',
            dataIndex: 'user',
            scopedSlots: { customRender: 'user' }
          },
          {
            title: '审核用户',
            align: 'center',
            dataIndex: 'auser',
            scopedSlots: { customRender: 'auser' }
          },
          {
            title: '图片',
            align: 'center',
            dataIndex: 'pic',
            scopedSlots: { customRender: 'pic' }
          },
          {
            title: '商品',
            dataIndex: 'itemId',
            scopedSlots: {
              customRender: 'itemId'
            }
          },
          {
            title: '文案',
            dataIndex: 'is_addTime',
            scopedSlots: {
              customRender: 'is_addTime'
            }
          },
          {
            title: '费率',
            dataIndex: 'shopTitle',
            scopedSlots: {
              customRender: 'shopTitle'
            }
          },
          {
            title: '优惠券',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '状态',
            dataIndex: 'startTime',
            scopedSlots: {
              customRender: 'startTime'
            }
          },
          {
            title: '备注',
            dataIndex: 'is_goodsPrice',
            scopedSlots: {
              customRender: 'is_goodsPrice'
            }
          },
          {
            title: '出单数据',
            // dataIndex: 'is_serviceRate',
            scopedSlots: {
              customRender: 'is_serviceRate'
            }
          },
          {
            title: '操作',
            dataIndex: 'is_serviceFee',
            scopedSlots: {
              customRender: 'is_serviceFee'
            }
          }
        ],
        invesorder: [
          {
            pd_id: 231845, // 跑单自增id
            pd_itemId: '627327684651', // 商品id
            pd_goodsImgUrl: '//img.alicdn.com/imgextra/i4/1809584306/O1CN01VzncvJ1hgC53gieCk_!!0-item_pic.jpg', // 图片
            pd_subTitle: '测试2', // 短标题
            pd_goodsPrice: '49.80', // 商品原价
            pd_goodsCouponPrice: '39.80', // 卷后价
            pd_commissionRate: '0', // 佣金比例
            pd_serviceRate: '1', // 服务费比例
            pd_mark: '54545', // 备注
            pd_couponActivityId: '', // 优惠卷id
            pd_couponUrl: 'https://uland.taobao.com/quan/detail?sellerId=1809584306&activityId=440ff73e0d344c1b818956af184bf83e', // 优惠卷
            pd_superUrl: 'http://sr.gzsqcw.cn/2020/11/1abb2d2020111917394944515.jpg', // 营销图url
            pd_writing: 'https://uland.taobao.com/quan/detail?sellerId=1809584306&activityId=440ff73e0d344c1b818956af184bf83e', // 文案
            pd_dtkState: 9, // 大淘客状态  9：等待 5：提交成功 1：审核通过 4 拒绝
            pd_hdkState: 9, // 好单裤状态 9：等待 5：提交成功 1：审核通过 4 拒绝
            pd_shzState: 9, // 实惠猪状态 9：等待 5：提交成功 1：审核通过 4 拒绝
            pd_issue_num: 0, // 出单数
            pd_issue_service_fee: '0.00', // 出单服务费
            pd_addTime: '2020-11-19 17:40:20', // 添加时间
            pd_cateText: '内衣', // 分类
            // 商品数据
            pd_detailArr: '{"sellCount":"3.5万+","categoryId":"50012772","shopType":"B","shopId":"106749678","userId":"1809584306","shopName":"leidya旗舰店","shopIcon":"//img.alicdn.com/imgextra//55/8e/TB1AA0.cnZKL1JjSZFISut_DFXa.jpg","sellerNick":"leidya旗舰店","title":"情侣款冬季加绒加厚法兰绒睡衣女保暖可爱珊瑚绒加大码睡衣套装女","rootCategoryId":"1625"}',
            pd_couponName: '测试2', // 优惠卷名称
            pd_couponStartTime: '2020-11-18 00:00:00', // 开始时间
            pd_couponEndTime: '2020-11-24 23:59:59', // 结束时间
            pd_couponMoney: '10.00', // 优惠卷金额
            pd_couponNum: 100000, // 优惠卷总量
            pd_couponSurplus: 38000, // 优惠卷剩余数量
            pd_manaUser: '跑单六', // 审核用户
            pd_dtkText: null,
            pd_hdkText: null,
            pd_shzText: null,
            user: '从雪艳', // 用户
            group: '从雪艳', // 组长
            teamName: '测试团队名称'// 队名
          }
        ],
        loading: false,
        btnloading: false
      }
    },
    computed: {},
    created () {
      this.getWebPaodanData(1)
    },
    mounted () {
    },
    methods: {
      passChange2 (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.start_time = dates[0].unix()
        this.end_time = dates[1].unix()
        console.log(this.start_time, this.end_time)
        // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
      },
      statusChange (value) {
        console.log(value, this.status) //
      },
      openimg (url) {
        this.previewImage = url
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      },
      goedit (row) {
        this.$store.dispatch('setIssuename', row)
        this.$router.push({
          path: '/gather/invesorder/gatherInfo'
        })
      },
      handleChange (value) {
        console.log(value, this.status) //
      },
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.start = dates[0].unix()
        this.end = dates[1].unix()
        console.log(this.start, this.end)
        // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
      },
      getWebPaodanData (page) {
        this.loading = true
        this.btnloading = true
        getWebPaodanData({
          success_status: this.success_status,
          user_id: this.user_id,
          group_id: this.group_id,
          pd_manaUser: this.pd_manaUser,
          status: this.status.key
          // start: this.start,
          // end: this.end,
          // shopTitle: this.shopTitle,
          // itemId: this.itemId,
          // is_eventId: this.is_eventId,
          // page: page,
          // pagesize: 15
        }).then(res => {
          if (res.code === 200) {
            console.log('列表', res)
            this.invesorder = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.total
            this.pagination = pagination
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
          this.btnloading = false
        }).catch(err => {
          console.log(err)
        })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getWebPaodanData(params.page)
      }
    }
  }
</script>
<style lang="less" scoped>
  .invesorder {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .index {
      background-color: #f5f5f5;
      border-radius: 20px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      /*margin-right: 24px;*/
      height: 20px;
      line-height: 20px;
      width: 20px;
      text-align: center;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .h24 {
      /deep/ .ant-radio-button-wrapper {
        height: 24px;
        line-height: 22px;
      }
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

    .a_blue {
      color: #2396F9;
    }

    .title {
      color: #101010;
      font-size: 14px;
      font-weight: 600;
    }

    .ipt {
      width: 138px;
      height: 24px;
    }

    .timepacker {
      /deep/ .ant-calendar-picker-input {
        padding: 0;
        height: 24px;
      }
    }

    .selecth24 {
      /deep/ .ant-select-selection__rendered {
        line-height: 24px;
      }

      /deep/ .ant-select-selection {
        height: 24px;
        border-radius: 4px;
      }
    }

    .coupon {
      /*border: 1px solid rgb(255, 85, 64);*/
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      overflow: hidden;
      width: 96px;
      /*margin: 0 auto;*/

      .couponleft {
        width: 48px;
        height: 24px;
        line-height: 24px;
        background-color: rgb(255, 85, 64);
        color: #ffffff;
      }

      .couponright {
        width: 48px;
        height: 24px;
        line-height: 21px;
        background-color: #ffffff;
        color: rgb(255, 85, 64);
        border: 1px solid #ff5540;
        border-radius: 0 4px 4px 0;
      }
    }
  }
</style>
